<!DOCTYPE html>
<html lang="zh_CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM添加信息</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #employeeTable,
        #employeeTable th,
        #employeeTable td {
            margin: 100px auto;
            border: 1px solid black;
            border-spacing: 0;
        }

        h4 {
            line-height: 50px;
        }

        .formDiv {
            width: 200px;
            border: 1px solid black;
            margin: 0 auto;
            padding: 20px;
        }

        table {
            margin: 0 auto;
        }
    </style>
    <script>
        function delA() {
            var tr = this.parentNode.parentNode;
            var name = tr.getElementsByTagName("td")[0].innerHTML;
            //确认删除
            var flag = confirm("确认删除" + name + "吗?");
            if (flag) {
                tr.parentNode.removeChild(tr);
            };
            return false;
        };
        window.onload = function () {
            var allA = document.getElementsByTagName("a");
            for (var i = 0; i < allA.length; i++) {
                allA[i].onclick = delA;
            };
            //添加员工功能
            var addEmpButton = document.getElementById("addEmpButton");
            addEmpButton.onclick = function () {
                var name = document.getElementById("empName").value;
                var email = document.getElementById("email").value;
                var salary = document.getElementById("salary").value;
                var tr = document.createElement("tr");

                // var nameTD = document.createElement("td");
                // var emailTD = document.createElement("td");
                // var salaryTD = document.createElement("td");
                // var aTD = document.createElement("td");

                // var a = document.createElement("a");
                // var nameText = document.createTextNode(name);
                // var emailText = document.createTextNode(email);
                // var salaryText = document.createTextNode(salary);
                // var delText = document.createTextNode("Delete");
                // nameTD.appendChild(nameText);
                // emailTD.appendChild(emailText);
                // salaryTD.appendChild(salaryText);
                // a.appendChild(delText);
                // aTD.appendChild(a);
                // tr.appendChild(nameTD);
                // tr.appendChild(emailTD);
                // tr.appendChild(salaryTD);
                // tr.appendChild(aTD);

                // a.href = "javascript:;";

                tr.innerHTML = "<td>"+name+"</td>"+
                "<td>"+email+"</td>"+
                "<td>"+salary+"</td>"+
                "<td><a href='javascript:;'>Delete</a></td>";
                var a = tr.getElementsByTagName("a")[0];
                a.onclick = delA
                var employeeTable = document.getElementById("employeeTable");
                var tbody = employeeTable.getElementsByTagName("tbody")[0];
                tbody.appendChild(tr);
            };
        };
    </script>
</head>

<body>
    <table id="employeeTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Salary</th>
            <th>&nbsp;</th>
        </tr>
        <tr>
            <td>Tom</td>
            <td>tom@tom.com</td>
            <td>5000</td>
            <td><a href="deleteEmp?id=001">Delete</a></td>
        </tr>
        <tr>
            <td>Jerry</td>
            <td>jerry@sohu.com</td>
            <td>8000</td>
            <td><a href="deleteEmp?id=002">Delete</a></td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>bob@tom.com</td>
            <td>10000</td>
            <td><a href="deleteEmp?id=003">Delete</a></td>
        </tr>
    </table>
    <div class="formDiv">
        <h4>添加新员工</h4>
        <table>
            <tr>
                <td class="word">name:</td>
                <td class="inp">
                    <input type="text" name="empName" id="empName" />
                </td>
            </tr>
            <tr>
                <td class="word">email:</td>
                <td class="inp">
                    <input type="text" name="email" id="email" />
                </td>
            </tr>
            <tr>
                <td class="word">salary:</td>
                <td class="inp">
                    <input type="text" name="salary" id="salary" />
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <button id="addEmpButton" value="abc">
                        Submit
                    </button>
                </td>
            </tr>
        </table>
    </div>
</body>

</html>